﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
	<title> eCommerce </title>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_h7ugeac9iy6wdn29.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/zepto.min.js"></script>
	<script src="js/event.js"></script>
	<script src="js/touch.js"></script>
	<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
	<script src="src/iscroll.js"></script>
	<!-- 初步实现了代码的模块化 按需加载 -->
	<!-- 1.引入压缩文件 zepto.min -->
	<!-- 2.引入模块依赖 event-->
	<!-- 3.引入手指事件 touch-->
</head>
<body onload="scrollLoad()">
			<header>
				<h1>
					eCommerce
				</h1>
				<span class="icon iconfont icon-caidan"></span>
				<div class="icon_box">
					<span class="icon iconfont icon-gouwuche"></span>
					<span class="icon iconfont icon-biaoqian"></span>
				</div>
			</header>
			<!-- 片段 -->
			<section>
				<div class="slider_box box_sh">
					 
					 <button class="btn_slider">
					 	DISCOVER
					 </button>
				</div>
			</section>
	<!-- 显示区域 -->
	<div id="wrapper">
		<!-- 实际滚动区域 -->
		<div id="scroller">
				<div class="list">
					<div id="load">
						<p class="rotating">
							<img src="images/img/timg.gif" alt="">
						</p>
					</div>
					<div class="search_box box_sh">
						<input type="search" placeholder="Search a item..">
						<span class="icon iconfont icon-fangdajing">
							
						</span>
					</div>
					<h2>
						<img src="images/title/tiltle_ecomerce.png" alt="">
					</h2>
					<ul>
						<li>
							<img src="images/img/img_list01.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						<li>
							<img src="images/img/img_list02.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						<li>
							<img src="images/img/img_list03.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						<li>
							<img src="images/img/img_list04.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						 
					</ul>
					 
					
				</div>
			
		</div>
	</div>
	<script>
	'user strict' //ES6默认注入，ES5需要手写注入
	// 1声明初始化iscroll 框架
	var myScroller;
	function scrollLoad(argument) {
		// 2.实例化iscroll框架
		// 3.参数传递 以对象的形式进行传递
		myScroller = new iScroll("wrapper",{
			onScrollMove:function () {
				// 最大滑动的距离 超出显示区域的高度
				console.log(this.maxScrollY)
				// 滑动的距离
				console.log(this.y)
				 
				if(this.y >= this.maxScrollY+100){
					console.log("触发了下拉刷新");
					// 下拉刷新loding动画展示
					$("#load").show().find("p").html("松开加载更多内容")
				}
			},
			// 当手指离开之后触发ajax请求
			onScrollEnd:function () {
				 // 手指离开之后显示加载动画 旋转loading图
				 $("#load").show().html('<p class="rotating"><img src="images/img/timg.gif" alt=""></p>');
				 // 发起ajax请求请求数据
//				 setTimeout(getAjax,3000);
				setTimeout(function(){
					$("#load").hide();
				},3000);

				 // 重新计算iScroll容器的高度
				 myScroller.refresh();

			}
		})

	}
/*
	// 获取数据的详细方法
	var getAjax = function (argument) {
		 $.ajax({
				 	url: 'img.txt',
				 	type: 'POST',
				 	success:function (data) {
				 		 $("#load").hide();
				 		 $(".list").find('ul').append(`<li>
							<img src="images/img/img_list02.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						<li>
							<img src="images/img/img_list03.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						<li>
							<img src="images/img/img_list04.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>
						<li>
							<img src="images/img/img_list01.png" alt="">
							<h3>Pink Shrit</h3>
							<p>.00</p>
						</li>`)
				 	}
				 })
	}
	*/
		// $(".list").swipeUp(function (argument) {
		// 	$.ajax({
		// 		url: 'img.txt',
		// 		type: 'POST',
		// 		beforeSend:function () {
		// 			alert(1)
		// 			$(".list p").css({"display":"block"});
		// 			$(".list p").addClass('rotating');
		// 			alert(2)
		// 		},
		// 		success:function (data) {
					
		// 			console.log("success");
		// 			setTimeout(function (argument) {
		// 				$(".list p").hide()
		// 				$(".list p").toggleClass('rotating');
		// 			}, 5000)
				
		// 		}
		// 	})
			 
		// })
	</script>
</body>
</html>